<template>
    <div >
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">性别</span>
        <span slot="more"></span>
        </LoginHeader>
        <div class="editsex">
            <img src="@/assets/njrpic/usercenterpic/pic_gender_female_normal.png" alt="" v-if="sex" @click="changesex">
            <img src="@/assets/njrpic/usercenterpic/pic_gender_female_actived.png" alt="" v-else>
        </div>
        <div class="editsex">
            <img src="@/assets/njrpic/usercenterpic/pic_gender_male_normal.png" alt="" v-if="!sex" @click="changesex">
            <img src="@/assets/njrpic/usercenterpic/pic_gender_male_actived.png" alt="" v-else>
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            sex:true,
            updatesex:'',
        }
    },
 components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        changesex(){
            this.sex=!this.sex
            if(this.sex){
                this.updatesex=0
            }else{
                this.updatesex=1
            }
            this.$http.put('/api/users/'+this.$store.state.id,{sex:this.updatesex})
            .then(({
                data,config
            })=>{
                console.log(data,config);
                if(data.code==200){
                    this.$message.success('修改性别成功')
                }else{
                    this.$message.success('修改性别失败')
                }
            })
        .then(({
            data,config
        })=>{
            if(data.code==200){
                console.log(data,config);
                if(data.data.sex=='0'){
                    this.sex=true
                }else{
                    this.sex=false
                }
            }else{
                this.$message.error('获取性别失败')
            }
        })
        }
    },
    mounted(){
        this.$http.get('/api/users/'+this.$store.state.username)
        .then(({
            data,config
        })=>{
            if(data.code==200){
                console.log(data,config);
                if(data.data.sex=='0'){
                    this.sex=true
                }else{
                    this.sex=false
                }
            }else{
                this.$message.error('获取性别失败')
            }
        })
    }
}
</script>
<style lang="less" scoped>
.editsex{
            text-align: center;
            margin-top: 80px;
            img{
                width: 50%;
            }
}
</style>